<%@ include file="/decorator/taglibs.jsp"%>
<script type="text/javascript" src="<c:url value='/jquery/jquery.autocomplete.js'/>"></script>
<script>
$(function() {
	init();
	$("#username").autocomplete("<c:url value="/user/suggest.sg" />", {
	width: 300,	scroll: false,matchSubset: false, scrollHeight: 300,dataType:"json",
		parse:function(raw){
	     var parsed = [];
	     for (var i=0; i < raw.model.length; i++) {		   
		     
	        var row = raw.model[i];
	        parsed.push({
	            data: row,
	           value: row,
	          result: row.name
	        });
	     }
	     return parsed;
		
	},
	formatMatch: function(row, i, max) {
		 return row.styleno;
		},
		formatItem: function(data, i, n, value) {
		//
		
			return  "<span>" +data.username+ "'</span> " +data.email;
		}
	});

	$("#username").result(
			function(data,value){
				$("#username").val(value.username);
			

		});
});

</script>

<div class="span-17">
<display:table name="users" id="user" class="nicetable">
<display:caption>
<form action="<c:url value="/user/search.sg" /> ">

<label class="tl">User List</label> <input type="text" class="text" id="username" name="username" autocomplete="off"/>
<button class="fg-button ui-state-default ui-corner-all command" type="submit">Search</button>
</form>
</display:caption>
  <display:column property="firstName" headerClass="ui-widget-header" title="ID" />
  <display:column property="lastName" headerClass="ui-widget-header" />
  <display:column property="email" headerClass="ui-widget-header" />
  <display:column title="Roles" headerClass="ui-widget-header">

	<c:forEach var="role" items="${user.roles}" varStatus="status">
	${role.name},
	</c:forEach>
  	
  </display:column>

</display:table>

</div>

<div id="nav-pagination-bottom" class="pagination"></div>

<script type="text/javascript">

function pageClik(){
}


$("#nav-pagination-bottom").pagination(${page.totalCount}, {
	items_per_page:${page.pageSize}, 
	callback:pageClik,
	current_page:${page.currentPageNo},	
	link_to:"<c:url value='/garment/list.sg'/>?p=__id__"
});
</script>